<template>
  <div class="solar-system-container">
    <canvas ref="solarSystemCanvas" width="600" height="1200"></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const solarSystemCanvas = ref(null); // 画布
const centerX = 300; // 画布中心坐标X
const centerY = 600; // 画布中心坐标Y

// 天体配置数据, 包括图片路径、半径、大小、自转速度、轨道半径、自转速度、月球配置数据（如果有）
const celestialBodies = {
  sun: {
    img: new Image(),
    radius: 0,
    scale: 70,
    rotationSpeed: 0.02,
    src: 'https://img.alicdn.com/imgextra/i1/O1CN01oVLbLx22VlN34KDQs_!!6000000007126-2-tps-800-800.png'
  },
  mercury: {
    img: new Image(),
    orbitRadius: 70,
    scale: 15,
    rotationSpeed: 0.03,
    revolutionSpeed: 0.04,
    src: 'https://img.alicdn.com/imgextra/i2/O1CN01UjgqIB1SrRxQfrflh_!!6000000002300-2-tps-800-800.png'
  },
  venus: {
    img: new Image(),
    orbitRadius: 100,
    scale: 20,
    rotationSpeed: -0.02,
    revolutionSpeed: 0.05,
    src: 'https://img.alicdn.com/imgextra/i3/O1CN01JGEgLU1dfxnVvp91R_!!6000000003764-2-tps-800-800.png'
  },
  earth: {
    img: new Image(),
    orbitRadius: 130,
    scale: 22,
    rotationSpeed: 0.01,
    revolutionSpeed: 0.02,
    src: 'https://img.alicdn.com/imgextra/i4/O1CN01R6wlzD1IhhMlBcGLg_!!6000000000925-2-tps-800-800.png',
    moon: {
      img: new Image(),
      orbitRadius: 20,
      scale: 8,
      revolutionSpeed: 0.1,
      src: 'https://img.alicdn.com/imgextra/i4/O1CN01Ad5SeB20tv1nfRoA2_!!6000000006908-2-tps-800-800.png'
    }
  },
  mars: {
    img: new Image(),
    orbitRadius: 160,
    scale: 20,
    rotationSpeed: 0.015,
    revolutionSpeed: 0.015,
    src: 'https://img.alicdn.com/imgextra/i1/O1CN01OlZAk81OVEHJ0pazq_!!6000000001710-2-tps-800-800.png'
  },
  jupiter: {
    img: new Image(),
    orbitRadius: 190,
    scale: 30,
    rotationSpeed: 0.008,
    revolutionSpeed: 0.01,
    src: 'https://img.alicdn.com/imgextra/i2/O1CN01MA3Mk51bAhWxWxHim_!!6000000003425-2-tps-800-800.png'
  },
  saturn: {
    img: new Image(),
    orbitRadius: 220,
    scale: 27,
    rotationSpeed: 0.006,
    revolutionSpeed: 0.008,
    src: 'https://img.alicdn.com/imgextra/i2/O1CN01NG2FjS1XDDEofNNhg_!!6000000002889-2-tps-800-800.png'
  },
  uranus: {
    img: new Image(),
    orbitRadius: 250,
    scale: 22,
    rotationSpeed: -0.005,
    revolutionSpeed: 0.005,
    src: 'https://img.alicdn.com/imgextra/i1/O1CN01wnxTX51xIPkTHqPBr_!!6000000006420-2-tps-800-800.png'
  },
  neptune: {
    img: new Image(),
    orbitRadius: 280,
    scale: 20,
    rotationSpeed: 0.004,
    revolutionSpeed: 0.004,
    src: 'https://img.alicdn.com/imgextra/i1/O1CN01LTf0rT25zwJWsIDkD_!!6000000007598-2-tps-800-800.png'
  }
};

// 初始化天体状态
const celestialStates = {};
// 随机初始角度
Object.keys(celestialBodies).forEach(name => {
  celestialStates[name] = {
    angle: Math.random() * Math.PI * 2,  // 随机初始角度
    rotation: 0
  };
  // `moon` 存在时，初始化月球状态
  if (celestialBodies[name].moon) {
    celestialStates[name].moonAngle = Math.random() * Math.PI * 2; // 随机初始角度
  }
});

// 星空背景
const stars = Array.from({ length: 200 }, () => ({
  x: Math.random() * 600,  // 星星坐标X
  y: Math.random() * 1200,  // 星星坐标Y
  size: Math.random() * 0.5 + 0.5,  // 星星大小
  opacity: Math.random() * 0.5 + 0.5  // 星星透明度
}));

// 绘制背景
const drawBackground = (context) => {
  context.fillStyle = '#050608';  // 背景颜色
  context.fillRect(0, 0, 600, 1200);  // 画布大小

  // 绘制星空
  stars.forEach(star => {
    context.beginPath();
    context.arc(star.x, star.y, star.size, 0, Math.PI * 2);  // 绘制圆形星星
    context.fillStyle = `rgba(255, 255, 255, ${star.opacity})`;  // 星星颜色
    context.fill();
  });

  // 银河系光晕
  const gradient = context.createRadialGradient(
      centerX, centerY, 100,
      centerX, centerY, 300
  );
  gradient.addColorStop(0, 'rgba(28, 40, 55, 0.8)');  // 开始颜色
  gradient.addColorStop(1, 'rgba(5, 6, 8, 0)');  // 结束颜色
  context.fillStyle = gradient;  // 背景渐变色
  context.fillRect(0, 0, 600, 1200);  // 画布大小
};

// 绘制轨道
const drawOrbit = (context, radius) => {
  context.beginPath();
  context.ellipse(centerX, centerY, radius, radius, 0, 0, Math.PI * 2);  // 绘制椭圆轨道
  context.strokeStyle = 'rgba(205,205,205,0.62)';  // 轨道颜色
  context.lineWidth = 0.5;  // 轨道宽度
  context.setLineDash([5, 5]);  // 轨道虚线
  context.stroke();
};

// 绘制天体（带自转）
const drawCelestialBody = (context, body, state, x, y) => {
  context.save();  // 保存状态
  context.translate(x, y);  // 移动坐标轴到天体位置
  context.rotate(state.rotation);  // 旋转到当前角度

  context.beginPath();
  context.arc(0, 0, body.scale/2, 0, Math.PI * 2);  // 绘制圆形天体
  context.clip();  // 裁剪到天体内部

  // 绘制天体图片
  context.drawImage(
      body.img,
      -body.scale/2,
      -body.scale/2,
      body.scale,
      body.scale
  );
  context.restore();  // 恢复状态
};

// 更新天体状态
const updateCelestialStates = () => {
  Object.entries(celestialBodies).forEach(([name, body]) => {  // 遍历天体
    const state = celestialStates[name];  // 天体状态

    // 更新自转
    state.rotation += body.rotationSpeed * 0.05;

    // 公转（太阳除外）
    if (name !== 'sun') {
      state.angle += body.revolutionSpeed * 0.05;
    }

    // 更新卫星状态
    if (body.moon) {
      state.moonAngle += body.moon.revolutionSpeed * 0.05;
    }
  });
};

// 绘制太阳系
const drawSolarSystem = () => {
  const canvas = solarSystemCanvas.value;
  const context = canvas.getContext('2d');
  context.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制背景
  drawBackground(context);

  // 绘制太阳
  const sun = celestialBodies.sun;
  drawCelestialBody(
      context,
      sun,
      celestialStates.sun,
      centerX,
      centerY
  );

  // 绘制行星及其轨道
  Object.entries(celestialBodies).forEach(([name, body]) => {
    if (name === 'sun') return;

    const state = celestialStates[name];
    const x = centerX + body.orbitRadius * Math.cos(state.angle);
    const y = centerY + body.orbitRadius * Math.sin(state.angle);

    // 绘制轨道
    drawOrbit(context, body.orbitRadius);

    // 绘制行星
    drawCelestialBody(context, body, state, x, y);

    // 绘制卫星
    if (body.moon) {
      const moon = body.moon;
      const moonX = x + moon.orbitRadius * Math.cos(state.moonAngle);
      const moonY = y + moon.orbitRadius * Math.sin(state.moonAngle);
      drawCelestialBody(context, moon, { rotation: 0 }, moonX, moonY);
    }
  });

  updateCelestialStates();
  requestAnimationFrame(drawSolarSystem);
};

onMounted(() => {
  // 加载所有图片资源
  const loadImages = Object.values(celestialBodies).map(body => {
    return new Promise(resolve => {
      body.img.onload = resolve;
      body.img.src = body.src;
      if (body.moon) {
        body.moon.img.src = body.moon.src;
      }
    });
  });

  Promise.all(loadImages).then(() => {
    drawSolarSystem();
  });
});
</script>

<style scoped>
.solar-system-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #050608;
}

canvas {
  border: 1px solid #272e37;
  box-shadow: 0 0 20px rgba(28, 40, 55, 0.5);
}
</style>